<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="dynamicTitle"
    :showTop="dynamicTitle"
    :dark="loaded ? false : true"
    :bg-color="dynamicColor"
    :callBackUrl="gotoMyTabUrl"
    :hideSafeArea="true"
  >
    <view class="basic-info" :style="'padding-top:' + navHeight + 'px;'">
      <view class="title">填写你的基本信息</view>
      <view class="desc">为你量身打造的成长指南</view>
      <view class="first-title">
        <view class="second-title">填写姓名</view>
        <u-input
          v-model="userInfo.name"
          placeholder="必填"
          shape="circle"
          :border="false"
          clearable
        ></u-input>
        <view class="line"></view>
      </view>
      <view class="first-title" @click="showSelectCpm('学段')">
        <view class="second-title">选择学段</view>
        <view class="second-desc"
          ><span :class="studyPhase.label == '必填' ? 'no-active' : 'avtive'">{{
            studyPhase.label
          }}</span>
          <img :src="rightArrow" alt=""
        /></view>
        <view class="line"></view>
      </view>
      <view class="first-title" @click="showSelectCpm('学校')">
        <view class="second-title">选择学校</view>
        <view class="second-desc"
          ><span :class="schoolInfo.label == '必填' ? 'no-active' : 'avtive'">{{
            schoolInfo.label
          }}</span>
          <img :src="rightArrow" alt=""
        /></view>
        <view class="line"></view>
      </view>
      <view class="first-title" @click="showSelectCpm('班级')">
        <view class="second-title">选择班级</view>
        <view class="second-desc"
          ><span :class="classInfo.label == '必填' ? 'no-active' : 'avtive'"
            >{{ gradeInfo.label
            }}{{ classInfo.label == "必填" ? "" : classInfo.label }}</span
          >
          <img :src="rightArrow" alt=""
        /></view>
        <view class="line"></view>
      </view>
      <!-- <view class="first-title">
        <view class="second-title">选择出生日期</view>
        <view class="second-desc">必填 <img :src="rightArrow" alt="" /></view>
        <view class="line"></view>
      </view> -->
      <view class="first-title" @click="showSelectCpm('性别')">
        <view class="second-title">选择性别</view>
        <view class="second-desc"
          ><span class="sexInfo.label=='必填'?'no-active':'avtive'">{{
            sexInfo.label
          }}</span>
          <img :src="rightArrow" alt=""
        /></view>
      </view>
      <view class="btn-container">
        <view class="confirm-btn" @click="saveUserInfoFn">确定</view>
      </view>
    </view>
    <u-select
      :key="selectMode"
      v-model="showSelect"
      mode="mutil-column-auto"
      :list="customSelectData"
      @confirm="handleSelectConfirm($event, item)"
    ></u-select>
  </page-wrap>
</template>
<script>
import { saveUserInfo, schoolList, classList } from "@/api/modules/zty.js";
import share from "@/mixins/share";
export default {
  mixins: [share],
  onPageScroll(e) {
    //滚动改变颜色
    if (e.scrollTop >= 10) {
      this.dynamicTitle = "活动详情";
      this.dynamicColor = "#cfe8fd";
    } else {
      this.dynamicTitle = "";
    }
  },
  data() {
    return {
      studyPhaseData: [
        {
          value: "1",
          label: "小学",
        },
        {
          value: "2",
          label: "初中",
        },
        {
          value: "3",
          label: "高中",
        },
      ],
      sexData: [
        {
          value: 0,
          label: "男",
        },
        {
          value: 1,
          label: "女",
        },
      ],
      cardType: "",
      studyPhase: {
        label: "必填",
        value: "",
      }, // 学段
      schoolInfo: {
        label: "必填",
        value: "",
      },
      gradeInfo: {
        label: "必填",
        value: "",
      },
      classInfo: {
        label: "必填",
        value: "",
      },
      sexInfo: {
        label: "必填",
        value: -1,
      },
      currentSelectMode: "",
      customSelectData: null,
      selectMode: "mutil-column-auto",
      showSelect: false,
      rightArrow:
        "https://img3.job1001.com/ypMp/elan/images/ztyNew/right-arrow.png",
      navHeight: getApp().globalData.navHeight,
      dynamicColor: "",
      dynamicTitle: "",
      userInfo: {
        name: "",
        avatar: "", // 用于存储头像的路径
      },
    };
  },
  methods: {
    async saveUserInfoFn() {
      if (
        this.cardType != "" &&
        this.userInfo.name != "" &&
        this.schoolInfo.value != "" &&
        this.sexInfo.value != -1 &&
        this.classInfo.value != ""
      ) {
        const params = {
          personId: uni.getStorageSync("person-id").slice(2) || undefined,
          cardType: this.cardType,
          personName: this.userInfo.name,
          schoolId: this.schoolInfo.value,
          sex: this.sexInfo.value,
          classId: this.classInfo.value,
        };
        const res = await saveUserInfo(params);
        if (res.code == 200) {
          // uni.showToast({
          //   title: "保存成功",
          //   icon: "none",
          //   duration: 2000,
          // });
          uni.navigateBack();
        }
      } else {
        uni.showToast({
          title: "请全部填写",
          icon: "none",
          duration: 2000,
        });
      }
    },
    async schoolListFn() {
      const params = {
        educationLevel: this.studyPhase.value,
      };
      const res = await schoolList(params);
      if (res.code == 200) {
        if (res.data.length != 0) {
          res.data.forEach((item) => {
            item.label = item.schoolName;
            item.value = item.schoolId;
          });
          this.customSelectData = res.data;
          this.selectMode = "single-column";
        } else {
          this.selectMode = "single-column";
          this.customSelectData = [];
          this.schoolInfo = {
            label: "必填",
            value: "",
          };
          this.cardType = "";
          this.gradeInfo = {
            label: "必填",
            value: "",
          };
          this.classInfo = {
            label: "必填",
            value: "",
          };
        }
      }
    },
    async classListFn(schoolId) {
      const parmas = {
        schoolId: schoolId,
      };
      const res = await classList(parmas);
      if ((res.code = 200)) {
        if (res.data.length != 0) {
          res.data.forEach((item) => {
            item.label =
              item.className == "" ? item.classIndex + "年" : item.className;
            item.value = item.classId;
            item.children.forEach((_item, _index) => {
              _item.label =
                _item.className == ""
                  ? _item.classIndex + "班"
                  : _item.className;
              _item.value = _item.classId;
            });
          });
          this.selectMode = "mutil-column-auto";
          this.customSelectData = res.data;
        } else {
          this.selectMode = "single-column";
          this.customSelectData = [];
          this.gradeInfo = {
            label: "必填",
            value: "",
          };
          this.classInfo = {
            label: "必填",
            value: "",
          };
        }
        console.log("this.customSelectData", this.customSelectData);
      }
    },
    showSelectCpm(item) {
      // 展开选择列表
      switch (item) {
        case "学段":
          this.currentSelectMode = "学段";
          this.selectMode = "single-column";
          this.customSelectData = this.studyPhaseData;
          this.showSelect = true;
          break;
        case "学校":
          if (this.studyPhase.value != "") {
            this.currentSelectMode = "学校";
            this.selectMode = "single-column";
            this.schoolListFn();
            setTimeout(() => {
              if (this.customSelectData.length != 0) {
                this.showSelect = true;
              } else {
                uni.showToast({
                  title: "暂无数据",
                  icon: "none",
                  duration: 2000,
                });
              }
            }, 500);
          } else {
            this.showSelect = false;
            uni.showToast({
              title: "请选择学段",
              icon: "none",
              duration: 2000,
            });
          }

          break;
        case "班级":
          if (this.schoolInfo.value !== "") {
            this.currentSelectMode = "班级";
            this.classListFn(this.schoolInfo.value);

            setTimeout(() => {
              if (this.customSelectData.length != 0) {
                this.showSelect = true;
              } else {
                uni.showToast({
                  title: "暂无数据",
                  icon: "none",
                  duration: 2000,
                });
              }
            }, 500);
          } else {
            this.showSelect = false;
            uni.showToast({
              title: "请选择学校",
              icon: "none",
              duration: 2000,
            });
          }

          break;
        case "性别":
          this.currentSelectMode = "性别";
          this.customSelectData = this.sexData;
          this.showSelect = true;
          break;
        case "出生日期":
          this.showSelect = false;
          this.pickerTime = true;
          break;
        default:
          break;
      }
    },
    handleSelectConfirm(e, item) {
      console.log("eitem", e, item);
      switch (this.currentSelectMode) {
        case "学段":
          if (this.studyPhase.label != e[0].label) {
            // 说明学段发生了改变 要清空下两级数据
            this.schoolInfo = {
              label: "必填",
              value: "",
            };
            this.gradeInfo = {
              label: "必填",
              value: "",
            };
            this.classInfo = {
              label: "必填",
              value: "",
            };
          }
          this.studyPhase.label = e[0].label;
          this.studyPhase.value = e[0].value;
          this.schoolListFn();
          break;
        case "学校":
          if (this.schoolInfo.label != e[0].label) {
            // 说明学校发生了改变 要清空下一级数据
            this.gradeInfo = {
              label: "必填",
              value: "",
            };
            this.classInfo = {
              label: "必填",
              value: "",
            };
          }
          this.schoolInfo.label = e[0].label;
          this.schoolInfo.value = e[0].value;
          this.classListFn(this.schoolInfo.value);
          this.customSelectData.forEach((item, index) => {
            if (item.schoolName == this.schoolInfo.label) {
              this.cardType = item.cardType;
            }
          });
          break;
        case "班级":
          this.gradeInfo.label = e[0].label;
          this.gradeInfo.value = e[0].value;

          this.classInfo.label = e[1].label;
          this.classInfo.value = e[1].value;
          break;
        case "性别":
          this.sexInfo.label = e[0].label;
          this.sexInfo.value = e[0].value;
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "careerPath/";
.basic-info {
  background-image: url($img-base + "ztyNew/ztybg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  padding: 32rpx;
  .title {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 800;
    font-size: 48rpx;
    color: #222222;
  }
  .desc {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #444444;
    margin-top: 26rpx;
    margin-bottom: 32;
  }
  .first-title {
    margin-top: 44rpx;
    .second-title {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 36rpx;
      color: #222222;
      margin-bottom: 28rpx;
    }
    .second-desc {
      width: 100%;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      img {
        width: 40rpx;
        height: 40rpx;
      }
      .active {
        color: #222222;
      }
      .no-active {
        color: #999999;
      }
    }
    .line {
      width: 100%;
      height: 2rpx;
      background: #f5f5f5;
      margin-top: 46rpx;
    }
  }
  .btn-container {
    height: 184rpx;
  }
  .confirm-btn {
    height: 80rpx;
    background: #f75a3e;
    border-radius: 12rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;
    margin-top: 60rpx;
    margin-bottom: 100rpx;
  }
}
</style>
